<template>
  <div class="creatBox">
    <el-input
      type="textarea"
      placeholder="请输入内容"
      v-model="form.textDocument"
      class="inpoutTextarea"
      :autosize="{ minRows: 4 }"
    ></el-input>
    <div class="files">
      <template v-if="isPicture">
        <el-upload
          class="upload-demo"
          :action="baseUrl + '/common/upload'"
          :on-preview="handlePreview"
          :headers="{
            Authorization: `Bearer  ${this.$store.state.user.token}`,
          }"
          :on-remove="handleRemove"
          :file-list="fileList"
          :on-success="onSuccess"
          name="file"
          :limit="9"
          list-type="picture-card"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </template>
    </div>
    <div class="btn">
      <div class="btnLeft">
        <!-- 表情 -->
        <el-popover placement="bottom" width="300" trigger="click">
          <div class="emijs out"></div>

          <div slot="reference" class="btnItem">
            <img src="@/assets/images/表情.png" alt="" />
            <div>表情</div>
          </div>
        </el-popover>
        <!-- 图片 -->
        <div slot="reference" class="btnItem" @click="isPicture = !isPicture">
          <img src="@/assets/images/图片.png" alt="" />
          <div>图片</div>
        </div>
        <!-- 图片 -->
      </div>
      <div class="btnRight">
        <el-button type="primary" round @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { postingForums } from "@/api/forum";
export default {
  data() {
    return {
      fileList: [
        // {
        //   name: "food2.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      form: {
        userId: this.userId,
        textDocument: "",
        fileAddress1: "",
        fileAddress2: "",
        fileAddress3: "",
        fileAddress4: "",
        fileAddress5: "",
        fileAddress6: "",
        fileAddress7: "",
        fileAddress8: "",
        fileAddress9: "",
      },
      fileList: [],
      isPicture: false,
    };
  },
  mounted() {
    const doms = document.querySelector(".out");
    for (var a = 128512; a <= 128580; a++) {
      let that = this;
      const emojis = "&#" + a;
      const pTags = document.createElement("p");
      pTags.innerHTML = emojis;
      pTags.className = "emojiHover";
      pTags.addEventListener("click", function () {
        that.form.textDocument +=  `[${emojis}]`;
      });
      doms.appendChild(pTags);
    }
    for (var b = 129296; b <= 129488; b++) {
      let that = this;
      const emojis = "&#" + b;
      const pTags = document.createElement("p");
      pTags.innerHTML = emojis;
      pTags.className = "emojiHover";
      pTags.addEventListener("click", function () {
        that.form.textDocument += `[${emojis}]`;
      });
      doms.appendChild(pTags);
    }
  },
  computed: {
    ...mapGetters(["baseUrl", "userId"]),
  },

  watch: {
    fileList: function (n, o) {
      this.form.fileAddress1 = n[0] ? n[0].response.url : "";
      this.form.fileAddress2 = n[1] ? n[1].response.url : "";
      this.form.fileAddress3 = n[2] ? n[2].response.url : "";
      this.form.fileAddress4 = n[3] ? n[3].response.url : "";
      this.form.fileAddress5 = n[4] ? n[4].response.url : "";
      this.form.fileAddress6 = n[5] ? n[5].response.url : "";
      this.form.fileAddress7 = n[6] ? n[6].response.url : "";
      this.form.fileAddress8 = n[7] ? n[7].response.url : "";
      this.form.fileAddress9 = n[8] ? n[8].response.url : "";
    },
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    onSuccess(res, File, fileList) {
      console.log(res, File, fileList);
      if (res.code == 200) {
        this.fileList = fileList;
      }
    },
    submit() {
      console.log(this.form);
      if (!this.form.textDocument) {
        this.$message({
          message: "文案不能为空",
          type: "warning",
        });
        return;
      }
      postingForums(this.form).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "发布成功",
            type: "success",
          });
          (this.form = {
            userId: this.userId,
            textDocument: "",
            fileAddress1: "",
            fileAddress2: "",
            fileAddress3: "",
            fileAddress4: "",
            fileAddress5: "",
            fileAddress6: "",
            fileAddress7: "",
            fileAddress8: "",
            fileAddress9: "",
          }),
            (this.fileList = []);
          this.isPicture = false;
          this.$emit("getList",1);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.creatBox {
  min-height: 150px;
  background-color: white;
  width: 750px;
  padding: 15px;
  margin: 0 auto;
  margin-bottom: 15px;
}
.inpoutTextarea {
  min-height: max-content;
  ::v-deep .el-textarea__inner {
    background-color: #f1f3f8;
    min-height: max-content;
  }
}

.files {
  margin-top: 15px;
}

.btn {
  display: flex;
  align-items: center;
  /* height: 100px; */
  justify-content: space-between;
  .btnLeft {
    display: flex;
    > span {
      height: 100%;
    }
  }

  .btnItem {
    height: 100%;
    text-align: center;
    padding-top: 15px;
    cursor: pointer;
    margin-right: 20px;
    > img {
      height: 40px;
    }
    > div {
      font-size: 16px;
    }
  }
}

.out {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  overflow: auto;
  padding: 10px;
  padding-left: 0px;
}
</style>
<style>
.emojiHover {
  margin-left: 10px;
  padding: 5px;
  cursor: pointer;
}
.emojiHover:hover {
  background-color: #eee;
}
</style>
